<template>
  <div>
    <!--    表格-->
    <el-table
        ref="tableRef"
        row-key="id"
        :data="tableData"
        style="width: 100%"
        @sort-change="handleSortChange"
        empty-text="暂无数据"
        @selection-change="handleSelectionChange"
    >
      <!--      选择列-->
      <el-table-column type="selection" width="60"></el-table-column>
      <!--      编号列-->
      <el-table-column prop="id" label="编号" width="100" sortable></el-table-column>
      <!--      生日列-->
      <el-table-column
          prop="birthday"
          label="生日"
          sortable
          width="200"
          column-key="date"
      />
      <!--      姓名列-->
      <el-table-column prop="name" label="姓名" width="200" />
      <!--      联系方式列-->
      <el-table-column prop="phonenumber" label="联系方式" width="200" />
      <!--      性别列-->
      <el-table-column
          prop="gender"
          label="性别"
          width="100">
        <template #default="scope">
          {{ scope.row.gender === 'F' ? '女' : '男' }}
        </template>
      </el-table-column>
      <!--      删除编辑列-->
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
              size="small"
              @click="handleAgree(scope.row)"
          >同意</el-button
          >
          <el-button
              size="small"
              type="danger"
              @click="handleRefuse(scope.row)"
          >拒绝</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!--    分页功能-->
    <div>
      <!--      批量同意-->
      <el-button type="success" plain @click="handleDelList" style="margin-top: 10px;margin-right: 10px"><el-icon><SuccessFilled /></el-icon>批量同意</el-button>
      <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="currentPage"
            background
            layout="total, prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="pageSize"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted,computed } from 'vue'
import { Search } from '@element-plus/icons-vue'
import type { TableColumnCtx, TableInstance } from 'element-plus'
import {ElMessage, ElMessageBox} from "element-plus";
import axios from "axios";

interface User {
  id: number
  name: string
  phonenumber: string
  gender: string
  birthday: string
  password: string
}

//表格数据
const tableData = ref([])
const currentPage = ref(1); //定义当前页码初始值为1
const pageSize = ref(12); //定义每页显示的数据条数为5
const total = ref(0); //初始化数据总条数

// 使用axios.get()方法获取用户列表
// 在组件挂载后执行回调函数
onMounted(() => {
  getData()
})

// 获取当前页数据
const getData = () => {
  axios.get("http://192.168.166.182:8080/registerRequest/getAll",{
    params:{
      pageNum: currentPage.value,
      pageSize: pageSize.value
    }
  }).then(response => {
    tableData.value  = response.data.records;
    total.value = response.data.total;
  }).catch(error => {
    console.error(error);
  })
}

// 页数改变
const handleCurrentChange = (newPage) => {
  currentPage.value = newPage;
  getData();
}

//排序
const handleSortChange = (sortData) => {
  //解构sortData参数，得到prop和order两个属性
  const { prop,order } = sortData;
  //使用sort方法对当前页面数据进行排序，并更新其值
  tableData.value = tableData.value.sort((a,b) => {
    if(order === 'ascending') { //升序
      return a[prop] === b[prop] ? a.id - b.id : a[prop] > b[prop] ? 1 : -1;
    } else { //降序
      return a[prop] === b[prop] ? a.id - b.id : a[prop] < b[prop] ? 1 : -1;
    }
  });
}

// 同意按钮事件
function handleAgree(row) { //row为当前行的数据
  ElMessageBox.confirm(
      '您确定要同意姓名为【' + row.name + '】的数据吗?', '危险操作',
      {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',}
  )
      .then(() => {
        // 获取同意的用户的 ID
        const memberId = row.phonenumber;
        // 发送 HTTP DELETE 请求来删除用户
        axios.post(`http://192.168.166.182:8080/registerRequest/agree/${memberId}`)
            .then(response => {
              // 处理删除成功后的逻辑，例如重新加载数据
              getData();
            }).catch(error => {
          // 处理错误
          console.error(error)
        })
      })
}

// 拒绝按钮事件
function handleRefuse(row) {
  ElMessageBox.confirm(
      '您确定要拒绝姓名为【' + row.name + '】的数据吗?', '危险操作',
      {confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning',}
  )
      .then(() => {
        // 获取同意的用户的 ID
        const memberId = row.phonenumber;
        // 发送 HTTP DELETE 请求来删除用户
        axios.delete(`http://192.168.166.182:8080/registerRequest/disagree/${memberId}`)
            .then(response => {
              // 处理删除成功后的逻辑，例如重新加载数据
              getData();
            }).catch(error => {
          // 处理错误
          console.error(error)
        })
      })
}

let multipleSelection = ref([]); //创建响应式变量，储存当前选中的数据行
//处理表格行选中状态变化的方法，val是当前选中的数据型数组
const handleSelectionChange = (val) => {
  multipleSelection.value = [];
  val.forEach(item => { //遍历选中的数据行数组
    multipleSelection.value.push(item.phonenumber) //将选中的每一行数据加入数组中
  })
}

// 批量同意
const handleDelList = () => {
  const memberIds = multipleSelection.value.map(String);
  axios.post('http://192.168.166.182:8080/registerRequest/agreeList/' + memberIds.join(','))
      .then(response => {
        // 处理删除成功后的逻辑，例如重新加载数据
        getData();
      }).catch(error => {
    console.error(error);
  });
}
</script>

<style>
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-blank);
}
.demo-pagination-block {
  margin-top: 10px;
}
.bt1 {
  margin-left: 15px;
}
</style>
